<!--
 * Date: 2019年11月18日 11:44:03
 * LastEditors: lvyou
 * LastEditTime: 2019年12月13日 15:36:47
 * FilePath: \youlinweb-master\src\pages\statistics\statistics.vue
 * copyright(c) 2019-2025 版权为浙江双城网络科技集团有限公司所有，违者必究。
 -->
<template>
  <div class="statistics-container">
    <swiper :options="swiperOption" ref="mySwiper" v-if="isNew!='isNew'">
      <swiper-slide v-if="isNew">
        <numone :type="0" :form="form"></numone>
      </swiper-slide>
      <swiper-slide v-if="isNew">
        <numcommon :type="0" :form="form"></numcommon>
      </swiper-slide>
      <swiper-slide v-if="isNew">
        <numlast :form="form"/>
      </swiper-slide>
      <swiper-slide v-if="!isNew">
        <numone :type="1" :form="form"></numone>
      </swiper-slide>
      <swiper-slide v-if="!isNew">
        <numcommon :type="1" :form="form"></numcommon>
      </swiper-slide>
      <swiper-slide v-if="!isNew&&form.signTimes!=null&&form.signTimes!=0">
        <numcommon :type="2" :form="form"></numcommon>
      </swiper-slide>
      <swiper-slide v-if="!isNew&&form.commentTimes!=null&&form.commentTimes!=0">
        <numcommon :type="3" :form="form"></numcommon>
      </swiper-slide>
      <swiper-slide v-if="!isNew&&form.leaveMessage!=null&&form.leaveMessage!=0">
        <numcommon :type="4" :form="form"></numcommon>
      </swiper-slide>
      <swiper-slide v-if="!isNew">
        <numcommon :type="5" :form="form"></numcommon>
      </swiper-slide>
      <swiper-slide v-if="!isNew">
        <numcommon :type="6" :form="form"></numcommon>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import numone from "src/components/statistics/numone.vue";
import numcommon from "src/components/statistics/numcommon.vue";
import numlast from "src/components/statistics/numlast.vue";
import api from "src/api/index";
export default {
  name: "statistics",

  components: { api, numone, numcommon, numlast },

  props: {},

  data() {
    return {
      isNew: "isNew",
      form:{},
      swiperOption: {
        slidesPerView: "auto"
      }
    };
  },

  computed: {},

  watch: {},

  created() {},

  mounted() {
    this.loginuser()
  },
  methods: {
    getTimeDetail(){
      if(this.form.firstLogin){
        const loginYear = this.$util.appendZero(
          new Date(this.form.firstLogin.replace(/-/g, "/")).getFullYear()
        );
        const loginMonth = this.$util.appendZero(
          new Date(this.form.firstLogin.replace(/-/g, "/")).getMonth()+1
        );
        const loginDay = this.$util.appendZero(
          new Date(this.form.firstLogin.replace(/-/g, "/")).getDate()
        );
        this.$set(this.form,"loginYear",loginYear);
        this.$set(this.form,"loginMonth",loginMonth);
        this.$set(this.form,"loginDay",loginDay);
      }
    },
    annuallyCount(userinfo) {
      api.annuallyCount().then(res=>{
        if(res.code==0){
          this.form =Object.assign(res.data,userinfo);
          if(String(res.data.firstLogin).includes(".")){
            this.$set(this.form,"firstLogin",res.data.firstLogin.split(".")[0]);
          }else{
            this.$set(this.form,"firstLogin",res.data.firstLogin);
          }
          this.getTimeDetail();
          if(this.form.loginTimes==null){
            this.isNew=true;
          }else{
            this.isNew=false;
          }
        }else{
          this.$toast(res.msg);
        }
      })
    },
    loginuser() {
      api.QuerygetUserId().then(res => {
        if (res.code == 0) {
          delete res.userinfo.firstLogin;
          this.annuallyCount(res.userinfo);
        } else {
          this.$toast(res.msg);
        }
      }).catch(()=>{
         this.annuallyCount();
      });
    },

  }
};
</script>

<style lang="less">
.statistics-container {
  position: relative;
  margin-top: -0.88rem;
  height: 100%;
}
@-moz-keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
</style>

